<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主题切换功能</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="./css/zhutiqiehuan.css">
</head>
<body>
  <div id="app" :class="currentThemeClass">
    <div class="container">
      <header>
        <h1>主题切换演示</h1>
      </header>
      <div class="content">
        <div class="card">
          <h2>主题切换功能</h2>
          <p>当前主题: <strong>{{ currentThemeName }}</strong></p>
        </div>
        <div class="card" :style="inlineStyles.card">
          <h2 :style="inlineStyles.heading">内联样式主题</h2>
          <p :style="inlineStyles.text">这部分使用内联样式实现主题切换</p>
            <button class="theme-btn light-btn" @click="setTheme('light')">浅色</button>
          <button class="theme-btn dark-btn" @click="setTheme('dark')">深色</button>
          <button class="theme-btn blue-btn" @click="setTheme('blue')">蓝色</button>
          <button class="theme-btn green-btn" @click="setTheme('green')">绿色</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
  <script>
    new Vue({
      el: '#app',
      data: {
        currentTheme: 'light'
      },
      computed: {
        currentThemeClass() {
          return `${this.currentTheme}-theme`;
        },
        currentThemeName() {
          const names = { light: '浅色', dark: '深色', blue: '蓝色', green: '绿色' };
          return names[this.currentTheme];
        },
        inlineStyles() {
          const themes = {
            light: {
              card: { backgroundColor: '#fff', color: '#333', border: '1px solid #ddd' },
              heading: { color: '#0066cc' },
              text: { color: '#333' }
            },
            dark: {
              card: { backgroundColor: '#333', color: '#eee', border: '1px solid #444' },
              heading: { color: '#4da6ff' },
              text: { color: '#eee' }
            },
            blue: {
              card: { backgroundColor: '#f0f7ff', color: '#003366', border: '1px solid #99c2ff' },
              heading: { color: '#0066cc' },
              text: { color: '#003366' }
            },
            green: {
              card: { backgroundColor: '#f0fff0', color: '#006600', border: '1px solid #99e699' },
              heading: { color: '#009933' },
              text: { color: '#006600' }
            }
          };
          return themes[this.currentTheme];
        }
      },
      methods: {
        setTheme(theme) {
          this.currentTheme = theme;
        }
      }
    });
  </script>